<template>
	<el-dialog :title="title" v-model="visible" :width="1200" destroy-on-close @closed="$emit('closed')">
		<el-form :model="form" :rules="rules" ref="dialogForm" label-width="100px" label-position="left">
			<el-form-item label="矩阵列明细" prop="columnList">
				<sc-form-table v-model="form.columnList" :addTemplate="addTemplate" drag-sort placeholder="暂无数据">
					<el-table-column prop="title"  label="列名称" >
						<template #default="scope">
							<el-input v-model="scope.row.title" placeholder="请输入列名称"></el-input>
						</template>
					</el-table-column>
					<el-table-column prop="tag"  label="列标识" >
						<template #default="scope">
							<el-input v-model="scope.row.tag" placeholder="请输入列标识"></el-input>
						</template>
					</el-table-column>
					<el-table-column prop="type"  label="列类型" >
						<template #default="scope">
							<sc-select  v-model="scope.row.type" dic="matrixColumn" clearable filterable></sc-select>
						</template>
					</el-table-column>
				</sc-form-table>
			</el-form-item>
		</el-form>
		<template #footer>
			<el-button @click="visible=false" >取 消</el-button>
			<el-button type="primary" :loading="isSaving" @click="submit()">保 存</el-button>
		</template>
	</el-dialog>
</template>

<script>
export default {
	name: "columnEdit",
	data(){
		return{
			title:"编辑矩阵列",
			visible: false,
			form: {
				id:null,
				columnList:[]
			},
			rules: {},
			isSaving: false,
			matrixId:null,
		}
	},
	computed:{
		addTemplate(){
			return {
				matrixId: this.form.id,
				title: '',
				tag: '',
				type: '',
			}
		}
	},
	mounted() {},
	methods: {
		//显示
		open(){
			this.visible = true;
			return this;
		},
		submit(){
			this.$refs.dialogForm.validate(async(valid) => {
				if (valid) {
					//增加排序
					this.form.columnList.forEach((item,index) =>{
						item.sortOrder = index;
					})
					this.isSaving = true;
					var res = await this.$API.system.matrixColumn.save.post(this.form);
					if(res.success){
						this.visible = false;
						this.$message.success("操作成功")
						this.$emit('success', this.form, this.mode)
					}
					this.isSaving = false;
				}
			})
		},
		//表单注入数据
		setData(data){
			this.form.id = data.id;
			this.form.columnList = data.columnList || []
		}
	}
}
</script>

<style scoped>

</style>
